import React, { useEffect, useState, Key } from 'react'
import {
  Button,
  Form,
  Input,
  Card,
  Space,
  Table,
  Tag,
  Tooltip,
  message,
} from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'

// 引入前端路由相关的hook
import { useNavigate } from 'react-router-dom'

//引入发送请求的方法
import {
  reqHospitalSets,
  reqDelHospitalSet,
  reqBatchDelHospitalSet,
} from '@api/hospital/hospitalSet'

// 引入医院设置相关类型
import {
  IhospitalSetList,
  IhospitalSetItem,
} from '@api/hospital/hospitalSet/model/hospitalSetTypes'

let flag = false // 用来存储是否点击了查询按钮, true为点击过, false为没有点击或已经清空
export default function HospitalSet() {
  // 用来存储医院设置表格数据的状态
  const [hospitalSetList, setHospitalSetList] = useState<IhospitalSetList>([])

  // 分页相关的状态
  const [total, setTotal] = useState<number>(0)
  const [pageSize, setPageSize] = useState<number>(5)
  const [page, setPage] = useState<number>(1)

  // table的加载效果状态
  const [loading, setLoading] = useState<boolean>(false)

  // 选中的数据id存储的状态
  const [selectKeys, setSelectKeys] = useState<Key[]>([])

  // 为了操作表单, 可以通过Form.useForm()函数,创建一个form实例
  const [form] = Form.useForm()
  // 接下来,需要使用这个form实例,和Form组件进行绑定

  //调用useNavagite创建navigate函数
  const navigate = useNavigate()

  // 组件挂载的时候,发送请求,获取医院设置表格数据
  useEffect(() => {
    getHospitalSetList(page, pageSize)
  }, [])

  // 封装的获取表格数据的函数
  async function getHospitalSetList(page: number, pageSize: number) {
    // 如果点击了查询按钮,则请求数据时,要传入hosname和hoscode.如果没有点击查询按钮或点击了清空之后,就不需要传入hosname和hoscode了

    let result

    setLoading(true) // 请求之前展示loading
    if (flag) {
      //获取到hosname和hoscode的值
      const { hosname, hoscode } = form.getFieldsValue() //返回当前form实例所绑定的form表单中的数据
      // 请求医院设置表格数据
      result = await reqHospitalSets(page, pageSize, hosname, hoscode)
    } else {
      result = await reqHospitalSets(page, pageSize)
    }
    // 请求完成之后,隐藏loading
    setLoading(false)

    // 存储医院设置列表数据
    setHospitalSetList(result.records)
    // 存储医院设置列表数据总数
    setTotal(result.total)
  }

  // 点击表单中查询按钮,表单校验通过之后触发的函数
  const onFinish = (values: any) => {
    // console.log('Success:', values)
    // 发送请求,重新获取table数据
    flag = true // 表示点击了查询,获取table数据,需要有筛选条件
    setPage(1)
    getHospitalSetList(1, pageSize)
  }

  const columns: ColumnsType<IhospitalSetItem> = [
    {
      title: '序号', // title决定了表头展示什么信息
      // dataIndex: 'name', // 如果不写render,dataIndex 表示这一列要渲染的是data中每一个对象的name属性的值. 如果写了render,dataIndex决定了render函数接收的第一个参数是具体数据中的某个值,还是数据对象
      // key: 'name',
      // render函数也可以决定这一列渲染什么数据, render的优先级比dataIndex更高. render函数的返回值是什么,这一列就渲染什么
      render: (text, records, index) => {
        // records一定是data中的每一个数据对象
        // index 是data中每一个数据对象的下标

        return index + 1
      },
      // 让这一列展示的数据水平居中
      align: 'center',
      width: 120,
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
      // key: 'age',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
      // key: 'address',
    },
    {
      title: 'api基础路径',
      // key: 'tags',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      render: (data) => {
        return (
          <Space>
            <Tooltip title="修改医院">
              <Button
                icon={<EditOutlined />}
                type="primary"
                onClick={() => {
                  // 跳转到编辑界面,并传递当前数据的id
                  navigate('/syt/hospital/hospitalSet/update', {
                    state: data.id,
                  })
                }}
              ></Button>
            </Tooltip>
            <Tooltip title="删除医院">
              <Button
                icon={<DeleteOutlined />}
                type="primary"
                danger
                onClick={async () => {
                  await reqDelHospitalSet(data.id)
                  message.success('删除成功')
                  getHospitalSetList(page, pageSize)
                }}
              ></Button>
            </Tooltip>
          </Space>
        )
      },
      // 让这一列固定在表格的右侧
      fixed: 'right',
      width: 120, //设置这一列的宽度
      align: 'center',
    },
  ]
  return (
    <Card>
      <Form
        form={form} // 此时form实例和当前Form组件就绑定成功了
        style={{ marginBottom: 20 }}
        layout="inline" // 让表单中的每一个表单元素,水平排列
        //   name="basic"
        //  表示这个表单中,每一个表单项对应的文本,在一行里面占8份(共24份)
        //   labelCol={{ span: 8 }}
        //   表示这个表单中,每一个表单项在一行里面占16份(共24份)
        //   wrapperCol={{ span: 16 }}
        //   initialValues={{ remember: false }} // 设置表单中表单项的默认值
        onFinish={onFinish} // 当点击提交按钮,表单校验通过,则调用
        // onFinishFailed={onFinishFailed} // 当点击提交按钮,表单校验不通过,则调用
        //   autoComplete="off"
      >
        <Form.Item
          // label="xxx" // 表单项对应的描述文本
          name="hosname" //和原生html的name是一致的
          // 表单校验规则
          // rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item
          // label="Password"
          name="hoscode"
          // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          {/* <Input.Password /> 密码框 */}
          <Input placeholder="医院编号" />
        </Form.Item>

        <Form.Item>
          {/* 如果一个Button上,有htmlType="submit"则说明这个按钮是当前表单的提交按钮 */}
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button
            type="default"
            onClick={() => {
              // 1. 清空表单中的所有数据
              form.setFieldsValue({ hosname: undefined, hoscode: undefined })
              // 2. 发送请求,获取table数据
              setPage(1)
              getHospitalSetList(1, pageSize)

              // 3. 把flag设置为false
              flag = false
            }}
          >
            清空
          </Button>
        </Form.Item>
      </Form>
      <Button
        type="primary"
        style={{ marginRight: 10 }}
        onClick={() => {
          //只要这行代码执行,浏览器地址栏的路径就会被修改.由于之前配置好了前端路由,所以会自动切换视图到添加界面
          navigate(`/syt/hospital/hospitalSet/add`)
        }}
      >
        添加
      </Button>
      <Button
        type="primary"
        danger
        disabled={selectKeys.length ? false : true}
        onClick={async () => {
          await reqBatchDelHospitalSet(selectKeys)
          message.success('批量删除成功')
          getHospitalSetList(page, pageSize)
          //清空数组
          setSelectKeys([])
        }}
      >
        批量删除
      </Button>
      {/* 
      
      columns 是用来控制表格中表头信息,以及对应的每一列渲染什么数据的配置项 
      dataSource 表格要渲染的数据
      bordered 给表格添加边框
      scroll 表示表格允许出现滚动条. x:1500 表示当表格的宽度超过1500px.在出现滚动条
      rowKey 是table组件在渲染数据时,为了性能优化,使用的key值. 只需传入我们dataSource所对应的数据中每一条数据的id即可
      pagination 是控制table组件分页的配置项,查看文档时,直接找pagination组件即可
      */}
      <Table
        loading={loading}
        style={{ marginTop: 20 }}
        columns={columns}
        dataSource={hospitalSetList}
        bordered
        scroll={{ x: 1500 }}
        rowKey="id"
        pagination={{
          current: page, // current的值是几,对应的页码就会高亮
          total, // 表示要分页的数据总数
          pageSize, //设置分页时,一页有多少条数据
          showSizeChanger: true, // 展示选择一页多少数据的下拉框
          pageSizeOptions: [2, 5, 10], // 控制一页有多少条数据的配置项,和showSizeChanger配合使用
          showQuickJumper: true, //展示快速跳到指定页的控件
          // 在分页器前面展示的内容
          showTotal: function (total) {
            return `总共: ${total}条`
          },
          // 只要点击分页中的某个功能,就会触发这个函数
          onChange: function (page: number, pageSize: number) {
            //page 是当前应该是第几页的页码
            //pageSize 是当前一页应该是多少条数据
            // console.log('执行了', page, pageSize)
            setPageSize(pageSize)
            setPage(page)
            //重新获取表格数据
            getHospitalSetList(page, pageSize)
          },
        }}
        // 展示表格中的复选框
        rowSelection={{
          onChange(selectedRowKeys) {
            // selectedRowKeys 选中的数据的id数组
            setSelectKeys(selectedRowKeys)
          },
        }}
      />
    </Card>
  )
}
